<template>
  <div class="container">
    <div class="head">
      <h5 style="line-height:24px;font-size:13px" :class="statusId">
        <a-icon type="clock-circle" />
        {{status}}
      </h5>
    </div>
    <p>{{title}}</p>
    <div class="bottom" v-if="statusId !== 'completed'">
      <h5 style="line-height:24px;font-size:13px;color:red">
        <a-icon type="clock-circle" style="color: red " />
        结束事时间：{{completeTime}}
      </h5>
    </div>
  </div>
</template>

<script>
export default {
  name: 'card',
  props: {
    status: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    completeTime: {
      type: String,
      default: ''
    },
    statusId: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped>
.container {
  width: 300px;
  background-color: rgb(255, 255, 255);
  border-radius: 4px;
  box-shadow: 3px 3px 3px #e9eaeb;
  margin: 10px 0px;
}
.container:hover {
  box-shadow: 6px 6px 6px #e9eaeb;
}
.head {
  background-color: rgba(255, 164, 21, 0.1);
  height: 24px;
  width: 80px;
  border-radius: 4px;
  vertical-align: center;
}
p {
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  color: #333;
  /* line-height: 24px; */
  margin-top: 10px;
}
.bottom {
  background-color: rgba(255, 16, 16, 0.1);
  height: 24px;
  width: 200px;
  border-radius: 4px;
  vertical-align: center;
}
.completed {
  color: #3dd1ae !important;
}
.going {
  color: #ffc541 !important;
}
.unstart {
  color: #ff5b57;
}
</style>
